<template>
	<text class="uni-icons" :style="{ fontSize: size + 'px', color: color }">
		{{ getIcon(type) }}
	</text>
</template>

<script>
export default {
	name: 'uni-icons',
	props: {
		type: {
			type: String,
			default: ''
		},
		size: {
			type: [Number, String],
			default: 16
		},
		color: {
			type: String,
			default: '#333'
		}
	},
	methods: {
		getIcon(type) {
			const icons = {
				'clear': '×',
				'top': '▲',
				'bottom': '▼',
				'left': '◀',
				'right': '▶'
			}
			return icons[type] || '●'
		}
	}
}
</script>

<style scoped>
.uni-icons {
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
</style> 